<template>
    <div>
        <el-button type="primary" style="margin-bottom: 10px;">添加SPU</el-button>
        <el-table border :data="spuList">
            <el-table-column label="序号" type="index" align="center" width="80"></el-table-column>
            <el-table-column label="SPU名称" prop="spuName"></el-table-column>
            <el-table-column label="SPU描述" prop="description"></el-table-column>
            <el-table-column label="操作">
                <template v-slot="{ row }">
                    <el-button title="添加SKU" icon="el-icon-plus" type="primary" size="small"></el-button>
                    <el-button title="修改SPU" icon="el-icon-edit" type="primary" size="small"></el-button>
                    <el-button title="查看SKU列表" icon="el-icon-info" type="info" size="small"></el-button>
                    <el-button title="删除SPU" icon="el-icon-delete" type="danger" size="small"></el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
            :page-sizes="[3, 6, 9, 12]" :page-size="pageSize" layout="prev, pager, next, jumper,->,sizes,total "
            :total="total" style="margin-top: 20px;">
        </el-pagination>
    </div>
</template>

<script>
import CategorySelector from '@/components/CategorySelector/index.vue'
import { reqGetSpuListData } from '@/api/product/spu'
import { mapState } from 'vuex'
export default {
    name: 'Spu',
    components: { CategorySelector },
    data() {
        return {
            currentPage: 1, //当前页
            pageSize: 3, //每页显示条数
            total: 0,//品牌列表数据总条数
            spuList: [],
        }
    },
    methods: {
        //每页显示数量改变时
        handleSizeChange(val) {
            this.pageSize = val
            this.getSpuListData()
            // console.log(`每页 ${val} 条`);
        },
        //当前页改变时
        handleCurrentChange(val) {
            this.currentPage = val
            this.getSpuListData()
            // console.log(`当前页: ${val}`);
        },
        async getSpuListData() {
            const result = await reqGetSpuListData(this.currentPage, this.pageSize, this.category3Id)
            if (result.code === 200) {
                this.spuList = result.data.records
                this.total = result.data.total
            }
            // console.log(result)
        },
    },
    computed: {
        ...mapState('attr', ['category3Id'])
    },
    watch: {
        //当三级id发生变化时，获取属性列表数据渲染至页面
        category3Id: {
            immediate: true,
            async handler(newval, oldval) {
                if (!this.category3Id) {
                    this.attrList = []
                    return
                }
                this.getSpuListData()
            }
        },
    },

}
</script>

<style></style>